import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './Index.module.less'
import { Space } from 'antd'

export class ApproveBlock extends Component {
  render () {
    return (
      <div className={style.approve} {...this.props}>{this.props.children}</div>
    )
  }
}

export class Header extends Component {
  render () {
    return (
      <div className={style['approve-header']} {...this.props}>
        <span className={style['approve-header__title']}>{this.props.title}</span>
        <span className={style['approve-header-right']}>
          {this.props.children}
        </span>
      </div>
    )
  }
}

Header.proptypes = {
  title: PropTypes.string
}

Header.defaultProps = {
  title: ''
}

export class TitleLine extends Component {
  render () {
    return (
      <div className={style['approve-title-line']} {...this.props}>
        <span>{this.props.title}</span>
        <span className={style['title-line-secondary']}>
          <Space size={16}>
            <span>{this.props.operator}</span>
            <span>{this.props.time}</span>
          </Space>
        </span>
      </div>
    )
  }
}

TitleLine.proptypes = {
  title: PropTypes.string
}

TitleLine.defaultProps = {
  title: ''
}

export class TextLine extends Component {
  render () {
    return (
      <div className={style['approve-text-line']} {...this.props}>{this.props.children}</div>
    )
  }
}

export class TextCell extends Component {
  render () {
    return (
      <div className={style['approve-text-cell']} {...this.props}>{this.props.children}</div>
    )
  }
}

export class Split extends Component {
  render () {
    return <div className={style['approve-split']} {...this.props} />
  }
}

export class Line extends Component {
  render () {
    return (
      <div className={style['approve-line']} {...this.props}>{this.props.children}</div>
    )
  }
}

export class Cell extends Component {
  render () {
    return (
      <div className={style['approve-cell']} {...this.props}>{this.props.children}</div>
    )
  }
}

Cell.proptypes = {
  style: PropTypes.object
}

Cell.defaultProps = {
  style: {}
}

export class Footer extends Component {
  render () {
    return (
      <div className={style['approve-footer']} {...this.props}>{this.props.children}</div>
    )
  }
}

export class DocLink extends Component {
  render () {
    return (
      <span className={style['doc-link']} onClick={() => this.props.onClick()}>{this.props.title}</span>
    )
  }
}

DocLink.proptypes = {
  title: PropTypes.string,
  src: PropTypes.string,
  onClick: PropTypes.func
}

DocLink.defaultProps = {
  title: '',
  src: '',
  onClick: () => {}
}

export class OtherInfo extends Component {
  render () {
    return (
      <div className={style['other-info-line']}>
        <span className={style['other-info-line-title']}>{this.props.title}：</span>
        <span className={style['other-info-line-message']}>{this.props.message}</span>
      </div>
    )
  }
}
OtherInfo.proptypes = {
  title: PropTypes.string,
  message: PropTypes.string
}

OtherInfo.defaultProps = {
  title: '',
  message: ''
}
